import React, { Component } from 'react'
import { Form, Input, Space, Button, DatePicker, Tabs } from 'antd'
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheDialog from '@/components/TheDialog'
import { apiShopSalesReturnLabel, apiShopSalesReturnLabelAdd, apiShopSalesReturnLabelEdit, apiShopSalesReturnLabelDel } from '@/request/orderManagement'

const { TabPane } = Tabs

export default class MallAfterlabelReason extends Component {
  state = {
    columns: [
      {
        title: '原因',
        dataIndex: 'labelReason',
        key: 'labelReason'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['order:mallAfterReason:edit']} onClick={() => this.editDialog(record)}>修改</TheButton>
            <TheButton haspermi={['order:mallAfterReason:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
          </>
        }
      }
    ],
    dataSource: [1],
    pageDataK: {
      pageNo: 1,
      pageSize: 10
    },
    pageDataH: {
      pageNo: 1,
      pageSize: 10
    },
    pageDataQ: {
      pageNo: 1,
      pageSize: 10
    },
    pageDataJ: {
      pageNo: 1,
      pageSize: 10
    },
    totalK: 0,
    totalH: 0,
    totalQ: 0,
    totalJ: 0,
    tabData: [
      {
        key: 'K',
        tab: '退款'
      },
      {
        key: 'H',
        tab: '退货'
      },
      {
        key: 'Q',
        tab: '取消'
      },
      // {
      //   key: 'J',
      //   tab: '拒绝'
      // },
    ],
    visible: '',
    labelType: 'K',
    title: ''
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { labelType } = this.state
    let res = await apiShopSalesReturnLabel({ labelType, ...this.state[`pageData${labelType}`] })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        [`pageData${labelType}`]: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        [`total${labelType}`]: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    const { labelType } = this.state
    this.setState({
      [`pageData${labelType}`]: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  getValue = value => {
    const { labelType } = this.state
    this.setState({
      [`pageData${labelType}`]: {
        pageNo: 1,
        pageSize: 10
      },
      searchValue: value
    }, () => {
      this.getData()
    })
  }
  changeKey = key => {
    this.setState({
      labelType: key
    }, () => {
      this.getData()
    })
  }
  handleCancel = () => {
    this.setState({
      visible: false,
      labelReason: '',
      title: '',
      salesReturnLabelId: '',
      type: ''
    })
  }
  handleOk = async () => {
    const { labelReason, type, labelType, salesReturnLabelId } = this.state
    if (!labelReason) {
      return React.$message({
        type: 'info',
        content: '请输入订单售后原因'
      })
    } else {
      if (type === 'add') {
        let res = await apiShopSalesReturnLabelAdd({ labelType, labelReason })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '新增成功'
          })
        }
      }
      if (type === 'edit') {
        let res = await apiShopSalesReturnLabelEdit({ labelType, labelReason, salesReturnLabelId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '修改成功'
          })
        }
      }
      this.handleCancel()
      this.getData()
    }
  }
  setlabelReason = e => {
    this.setState({
      labelReason: e.target.value
    })
  }
  openDialog = () => {
    this.setState({
      title: '新增原因',
      visible: true,
      type: 'add'
    })
  }
  editDialog = value => {
    this.setState({
      title: '修改原因',
      visible: true,
      type: 'edit',
      labelReason: value.labelReason,
      salesReturnLabelId: value.salesReturnLabelId
    })
  }
  delConfirm = record => {
    React.$confirm({
      title: '您确认删除此条售后原因吗？',
      onOk: async () => {
        let res = await apiShopSalesReturnLabelDel({ salesReturnLabelId: record.salesReturnLabelId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }
  render() {
    const { labelType, tabData, visible, columns, dataSource, title, labelReason } = this.state
    return (
      <div className='p-layout-box'>
        <Tabs onChange={this.changeKey} tabBarExtraContent={<TheButton  haspermi={['	order:mallAfterReason:add']} size="middle" type="default" onClick={this.openDialog}>新增</TheButton>}>
          {
            tabData.map(v => {
              return <TabPane key={v.key} tab={v.tab}>
                <div className="p-layout-content-pagination">
                  <TheTable
                    columns={columns}
                    dataSource={dataSource} />
                  <ThePagination
                    pageNo={this.state[`pageData${labelType}`].pageNo}
                    pageSize={this.state[`pageData${labelType}`].pageSize}
                    total={this.state[`total${labelType}`]}
                    pageChange={this.pageChange}
                  />
                </div>
              </TabPane>
            })
          }
        </Tabs>
        <TheDialog
          title={title}
          visible={visible}
          handleCancel={this.handleCancel}
          handleOk={this.handleOk}
          width={400}
        >
          <Input defaultValue={labelReason} maxLength={40} placeholder='请输入订单售后原因' onChange={this.setlabelReason} />
        </TheDialog>
      </div>
    )
  }
}
